<template>
    <div class="flexbox flexcenter">
        <SaveModel ref="save_model"/>
        <TkModel ref="tk_model" @sessionSave="sessionSave" :dataForm="dataForm"/>
        <el-popover placement="bottom" width="460" trigger="click">
            <div class="yusuan_num">受众定向：{{dataForm.adgroup.audience.length}} /20</div>
            <div class="yusuan_list">
                <div class="yusuan_item flexbox flexcenter flexbetween"  @click="selectModel(item,index)" :class="{'active':index==dataForm.audience_index}" v-for="(item,index) in dataForm.adgroup.audience" :key="index">
                    <img src="@/assets/img/market_checked.svg" alt="" class="ys_check">
                    <el-input v-model="item.audname" placeholder="请输入内容" @change="sessionSave" size="small" class="ys_input"></el-input>
                    <div class="yusuan_edit flexbox flexcenter">
                        <el-tooltip content="存为模板" placement="top">
                            <span class="icon_btn" @click.stop="saveModel(item,2,'audname')"><img src="@/assets/img/ys_icon1.svg" alt=""></span>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <span class="icon_btn" @click.stop="deletModel(index)"><img src="@/assets/img/ys_icon2.svg" alt=""></span>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="yusuan_btn flexbox flexbetween">
                <el-button size="mini" style="width:222px" @click="addModel">添加定向</el-button>
                <el-button size="mini" style="width:222px" @click="choiceModel">选择模板</el-button>
            </div>
            <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                <span class="select_text">{{dataForm.adgroup.audience[dataForm.audience_index].audname}}</span>
                <span class="el-icon-caret-bottom"></span>
            </div>
        </el-popover>
        <div class="yusuan_num" style="font-size:14px;margin-left:16px">定向：{{dataForm.adgroup.audience.length}} /20</div>
    </div>
</template>

<script>
import SaveModel from './SaveModel'
import TkModel from './TkModel'
export default {
    components: {
        SaveModel,
        TkModel
    },
    props: ["dataForm"],
    name: "",
    data() {
        return {
            location_ids:[]
        };
    },
    created() {
        this.getRegion()
    },
    computed:{
        isVdTrue() {
            let is_show = true;
            if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids.length > 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].video_user_actions.length > 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_period
            ) {
                is_show = false;
            }else if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids.length <= 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].video_user_actions.length <= 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_period==""
            ) {
                is_show = false;
            }
            return is_show;
        },

        isAhTrue() {
            let is_show = true;
            if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[1].action_category_ids.length > 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[1].video_user_actions.length > 0 
            ) {
                is_show = false;
            }else if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[1].action_category_ids.length <= 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[1].video_user_actions.length <= 0
            ) {
                is_show = false;
            }
            return is_show;
        },
    },
    methods: {
        //获取地域
        async getRegion() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl+"launch/TiktokInfo/regionInfo",
                {
                    region_code:this.dataForm.base[0].targeting_region_codes,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.treeData = res.data
                let arr = []
                arr.push(res.data[0])
                this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids = arr
                this.location_ids = arr
                this.sessionSave()
            }
        },


        sessionSave() {
            this.$emit("sessionSave");
        },

        saveModel(item, type,name) {
            let that = this;
            this.budgetCheck(that.dataForm.audience_index, function () {
                that.$refs.save_model.getData(item,type,name)
            });
        },


        // 选择模板
        selectModel(val, index) {
            let that = this;
            this.budgetCheck(that.dataForm.audience_index, function () {
                that.dataForm.audience_index = index
            });
            this.sessionSave();
        },

        //添加模板
        addModel(){
            let that = this;
            if(that.dataForm.adgroup.audience.length>=20){
                return
            }else{
                this.budgetCheck(that.dataForm.audience_index, function () {
                    let list = that.dataForm.adgroup.audience;
                    let nodeData = {
                        audname: "定向分组"+(that.dataForm.adgroup.audience.length+1),
                        location_ids: that.location_ids,
                        audience_ids: [],
                        excluded_audience_ids: [],
                        all_audience: [],
                        interest_category_ids: [],
                        interest_keywords_ids: [],
                        age_groups: [],
                        age_all: "1",
                        operating_systems: [],
                        operating_all: "1",
                        gender: "GENDER_UNLIMITED",
                        languages: [],
                        actions: [
                            {
                                action_category_ids: [],
                                action_scene: "VIDEO_RELATED",
                                action_period: "",
                                is_show: false,
                                video_user_actions: [],
                            },
                            {
                                action_category_ids: [],
                                action_scene: "CREATOR_RELATED",
                                action_period: 0,
                                is_show: false,
                                video_user_actions: [],
                            },
                            {
                                action_category_ids: [],
                                action_scene: "HASHTAG_RELATED",
                                action_period: 0,
                                is_show: false,
                                video_user_actions: ["VIEW_HASHTAG"],
                            },
                        ],
                    }
                    list.push(nodeData)
                    that.dataForm.audience_index = list.length - 1
                });
            }
            this.sessionSave();
        },

        // 选择模板
        choiceModel(){
            let max_length = 20 - this.dataForm.adgroup.audience.length
            this.$refs.tk_model.getData(2,max_length,'audname')
        },

        // 删除模板
        deletModel(index){
            let that = this
            if(that.dataForm.adgroup.audience.length == 1){
                return
            }else{
                that.dataForm.adgroup.audience.splice(index,1)
                that.dataForm.audience_index = 0
            }
            this.sessionSave();
        },

        // 校验
        budgetCheck(index, callback) {
            let list = this.dataForm.adgroup.audience;
            if(list[index].location_ids.length<=0){
                this.$message.error("请选择地域");
                return;
            }
            if(this.isVdTrue){
                this.$message.error("请先完善当前视频互动行为！");
                return
            }
            if(this.isAhTrue){
                this.$message.error("请先完善当前创作者互动行为！");
                return
            }
            callback();
        },

    }
};
</script>


<style scoped>
</style>

